<!-- liyang 2018/09/13 案例列表 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset='utf-8'>
    <title> - 若维俱乐部 </title>
    <meta name='keywords' content=''>
    <meta name='description' content=''>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/itemList.css">
</head>

<body>
    <!-- 引入头部 开始 只有开服务器才可以看到效果，否则会提示无法引入本地js -->
    <div id="headerPage"></div>
    <!-- 引入头部 结束 -->

    <!-- 内容 开始 -->
    <div class="content">
        <!-- 去掉左边的空白 开始 -->

        <div class="lists">
            <!-- 左侧 开始 -->
            <div class="left fl">
                <ul class="imglist" id="imglist">
                </ul>
                <!-- 分页 开始 -->
                <div class="page">
                    <div class="buttons">
                        <button class="newsBtn active" onclick="window.location.href='#'">1</button>
                        <button class="newsBtn" onclick="window.location.href='#'">2</button>
                        <button class="newsBtn" onclick="window.location.href='#'">3</button>
                        <button class="newsBtn" onclick="window.location.href='#'">4</button>
                    </div>

                </div>
                <!-- 分页 结束 -->
            </div>
            <!-- 左侧 结束 -->

            <!-- 右侧 开始 -->
            <div class="right fr">
                <!-- 搜索 标题 开始 -->
                <div class="title">
                    搜索你感兴趣的
                </div>
                <!-- 搜索 标题 结束 -->
                <!-- 蓝色分割线 开始 -->
                <div class="borders"></div>
                <!-- 蓝色分割线 结束 -->
                <!-- 搜索 开始 -->
                <input class="search" placeholder="搜索你想要的！！！" />
                <!-- 搜索 结束 未写好 -->

            </div>
            <!-- 右侧 结束 -->
        </div>

        <!-- 去掉左边的空白 开始 -->
    </div>
    <!-- 内容 结束 -->

    <div id="footerPage"></div>
</body>

<script src="js/jquery.js"></script>
<script src="js/hearder.js"></script>
<script src="js/itemList.js"></script>
<script>
    $(function () {
        $('#headerPage').load('header.html');
        $('#footerPage').load('footer.html');
    })
</script>

<script type="text/javascript">
    var obj = '';
    $(function () {
        $.ajax({
            url: './testData/itemData.json',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                //方法中传入的参数data为后台获取的数据
                obj = eval(data.data);
                var divA = document.getElementById("imglist");
                strimg = '<div class="imgs"> </div>';
                strsum = '';
                for (i in data.data.raws) {
                    strtemp = '<a href="itemDetail.html?id=' + data.data.raws[i].id+'">';
                    strspan = '<span>' + data.data.raws[i].name + '</span>';
                    strsum = strsum + '<li>' + strtemp + strimg + strspan +
                        '</a>' + '</li>';
                }
                divA.innerHTML = divA.innerText + strsum;
            },
            error: function () {
                alert('接收数据错误！');
            }
        })
    })
</script>



</html>